<template>
  <van-dialog
    v-model="show"
    :title="title"
    show-cancel-button
    @confirm="confirm"
    @cancel="cancel"
  >
    <van-field
      v-model="inputValue"
      :autocomplete="false"
      :type="type"
      style="background-color: whitesmoke;width: 80%;margin: 0 auto;margin-top: 0.3rem;margin-bottom: 0.3rem;"
      :placeholder="placeholder"
      :required="required"
    />
  </van-dialog>
</template>

<script>

import { Dialog, Field, Toast } from 'vant'

export default {
  name: 'CfInput',
  components: {
    [Dialog.Component.name]: Dialog.Component,
    [Field.name]: Field
  },
  props: {
    title: { // 标题
      type: String, require: false, default: 'Input对话框'
    },
    type: { // 输入框类型
      type: String, require: false, default: 'text'
    },
    required: { // 是否必填
      type: Boolean, require: false, default: false
    },
    placeholder: { // 提示文字
      type: String, require: false, default: '请输入内容...'
    },
    popShow: { // 显示控制标识
      type: Boolean, require: true, default: false
    },
    inputCancel: {
      type: Function, require: true, default: () => { }
    },
    inputConfirm: {
      type: Function, require: true, default: () => { }
    }
  },
  data () {
    return {
      inputValue: ''
    }
  },
  computed: {
    show: {
      get () {
        return this.popShow
      },
      set (val) {
        this.$emit('pop-change', val)
      }
    }
  },
  watch: {

  },
  methods: {
    confirm () {
      this.$emit('pop-change', false)
      if (this.required) {
        if (!this.inputValue) {
          Toast({ message: '请填写内容', duration: 500 })
          return
        }
      }
      this.inputConfirm(this.inputValue)
      this.inputValue = ''
    },
    cancel () {
      this.$emit('pop-change', false)
      this.inputCancel()
      this.inputValue = ''
    }
  }

}
</script>

<style>
</style>
